<template>
  <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px', height: navBarHeight + 'px' }">
    <view class="left" @click="goBack">
      <text class="iconfont icon-back"></text>
    </view>
    <view class="title">{{ title }}</view>
    <view class="right">
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '首页'
    }
  },
  data() {
    return {
      statusBarHeight: 0,
      navBarHeight: 0
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    }
  },
  created() {
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight; // 获取状态栏高度
    if (systemInfo.platform === 'android') {
      this.navBarHeight = this.statusBarHeight + 48; // Android 导航栏高度
    } else {
      this.navBarHeight = this.statusBarHeight + 44; // iOS 导航栏高度
    }
  }
}
</script>

<style>
.custom-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
  padding: 0 10px;
  box-sizing: border-box;
}

.left, .right {
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.iconfont {
  font-size: 20px;
}
</style>
